/* animations */
@keyframes spin {
  from {
    transform: rotate(0deg);
  } to {
    transform: rotate(360deg);
  }
}

&.spin {
  animation: spin 4s linear infinite;
}

/* flexbox */
.flx { display: flex; }

.flx-cl { flex-direction: column; }
.flx-wp { flex-wrap: wrap; }

.flx-c { align-items: center; }
.flx-b { align-items: baseline; }
.flx-h { align-items: stretch; }
.flx-t { align-items: flex-start; }
.flx-e { align-items: flex-end; }

.flx-j { justify-content: space-between; }
.flx-jc { justify-content: center; }

.flx-a {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

.flx-gw { flex: 1 0 auto; }
.flx-no { flex: none; }

.flx-ft { order: -1; }
.flx-lt { order: 99999; }

.flx-m {
  > .flx-a ~ .flx-a { margin-top: @margin; }
  > .flx-a ~ .flx-mt { margin-top: @margin; }
  > .flx-a ~ .flx-mr { margin-top: @margin; }
  > .flx-a ~ .flx-ml { margin-left: @margin; }
}

@media screen and (min-width: 480px) {
  .sm-no-flx { display: block; }
  .sm-flx {
    display: flex;

    &.flx-m {
      > .flx-a ~ .flx-a { margin-top: 0; margin-left: @margin; }
      > .flx-a ~ .flx-mr { margin-top: 0; margin-right: @margin; }
      > .flx-a ~ .flx-mt { margin-top: 0; margin-left: @margin; }
    }
  }
}

@media screen and (min-width: 720px) {
  .md-flx {
    display: flex;

    &.flx-m {
      > .flx-a ~ .flx-a { margin-top: 0; margin-left: @margin; }
      > .flx-lt ~ .flx-mr { margin-top: 0; margin-left: 0; margin-right: @margin; }
      > .flx-lt ~ .flx-mt { margin-top: 0; margin-right: 0; margin-left: @margin; }
    }
  }
}

/* grid */
.cnt {
  margin-left: auto;
  margin-right: auto;
}

.cl-1 { width: 8.33333%; }
.cl-2 { width: 16.66667%; }
.cl-3 { width: 25%; }
.cl-4 { width: 33.33333%; }
.cl-5 { width: 41.66667%; }
.cl-6 { width: 50%; }
.cl-7 { width: 58.33333%; }
.cl-8 { width: 66.66667%; }
.cl-9 { width: 75%; }
.cl-10 { width: 83.33333%; }
.cl-11 { width: 91.66667%; }
.cl-12 { width: 100%; }

@media screen and (min-width: 480px) {
  .sm-cl-1 { width: 8.33333%; }
  .sm-cl-2 { width: 16.66667%; }
  .sm-cl-3 { width: 25%; }
  .sm-cl-4 { width: 33.33333%; }
  .sm-cl-5 { width: 41.66667%; }
  .sm-cl-6 { width: 50%; }
  .sm-cl-7 { width: 58.33333%; }
  .sm-cl-8 { width: 66.66667%; }
  .sm-cl-9 { width: 75%; }
  .sm-cl-10 { width: 83.33333%; }
  .sm-cl-11 { width: 91.66667%; }
  .sm-cl-12 { width: 100%; }
}

@media screen and (min-width: 720px) {
  .md-cl-1 { width: 8.33333%; }
  .md-cl-2 { width: 16.66667%; }
  .md-cl-3 { width: 25%; }
  .md-cl-4 { width: 33.33333%; }
  .md-cl-5 { width: 41.66667%; }
  .md-cl-6 { width: 50%; }
  .md-cl-7 { width: 58.33333%; }
  .md-cl-8 { width: 66.66667%; }
  .md-cl-9 { width: 75%; }
  .md-cl-10 { width: 83.33333%; }
  .md-cl-11 { width: 91.66667%; }
  .md-cl-12 { width: 100%; }
}

/* typography */
.bgr { font-size: @h1; }
.bg { font-size: @h2; }
.hg { font-size: @h3; }
.md { font-size: @h4; }
.sml { font-size: @h5; }
.smlr { font-size: @h6; }

.nosl {
  cursor: default;
  user-select: none;
}

.ttu {
  letter-spacing: .1em;
  text-transform: uppercase;
}

.lt {
  text-decoration: line-through;
}

.a {
  cursor: pointer;
}

.tal { text-align: left; }
.tac { text-align: center; }
.tar { text-align: right; }
.taj { text-align: justify; }

.wsn { white-space: nowrap; }
.wwb { word-wrap: break-word; }

.tr {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lr {
  list-style: none;
  padding-left: 0;
}

.ln { list-style: none; }

.tdu { text-decoration: underline; }
.tdn { text-decoration: none; }

/* alignment */
.di { display: inline; }
.db { display: block; }
.dib { display: inline-block; }
.dt { display: table; }
.dtc { display: table-cell; }

.dn { display: none; }

.oh { overflow: hidden; }
.os { overflow: scroll; }
.oa { overflow: auto; }

.clr:before,
.clr:after {
  content: ' ';
  display: table
}

.clr:after { clear: both; }

.fl { float: left; }
.fr { float: right; }

.fit { max-width: 100%; }

.ab { vertical-align: baseline; }
.at { vertical-align: top; }
.am { vertical-align: middle; }
.ab { vertical-align: bottom; }

/* white-space */
.m { margin: @margin; }
.m ~ .m { margin-top: 0; }
.mt { margin-top: @margin; }
.mr { margin-right: @margin; }
.mb { margin-bottom: @margin; }
.ml { margin-left: @margin; }
.mxa { margin-left: auto; margin-right: auto; }

.p { padding: @padding; }
.p ~ .p { padding-top: 0; }

.pt { padding-top: @padding; }
.pr { padding-right: @padding; }
.pb { padding-bottom: @padding; }
.pl { padding-left: @padding; }
.py { padding-top: @padding; padding-bottom: @padding; }
.px { padding-left: @padding; padding-right: @padding; }

.sp ~ .sp { border-left: 1px solid @border-color; }

.pd {
  padding-right: @padding / 2;

  ~ .pd {
    padding-left: @padding / 2;
  }
}

.rel { position: relative; }
.abs { position: absolute; }

.r0 { right: 0; }
.ra { right: 0; }
.t0 { top: 0; }
.ta { top: 0; }
.b0 { bottom: 0; }
.ba { bottom: 0; }
.l0 { left: 0; }
.la { left: 0; }

.z1 { z-index: 1; }
.z2 { z-index: 2; }
.z3 { z-index: 3; }
.z4 { z-index: 4; }
.z5 { z-index: 5; }

/* borders */
.b { border: 1px solid @border-color; }
.b ~ .b { border-top: 0; }
.nb { border: 0; }

/* icons */
.ic {
  min-width: @h5;
  min-height: @h5;

  width: @h5;
  height: @h5;

  svg {
    width: inherit;
    height: inherit;
    vertical-align: middle;
  }

  &.x2 {
    width: @h3;
    height: @h3;
  }

  &.x3 {
    width: @h1;
    height: @h1;
  }
}

/* states */
.ch {
  display: none;

  ~ span {
    opacity: .5;
  }

  &:checked {
    ~ span {
      opacity: 1;
      text-decoration: none;
    }

    ~ .on { display: inline-block; }
    ~ .off { display: none; }
  }

  ~ .on { display: none; }
  ~ .off { display: inline-block; }
}

/* fields */
.bu {
  border: 0;
  color: @color;
  height: @action;
  min-width: @action;
  line-height: @action;
  border-radius: @radius;
  padding: 0 10px;
  min-height: @action;
  line-height: @action - 2px;
  transition: opacity .3s;
  transition: all .3s;
  border: 1px solid @border-color;
  background-color: @shadow-color;

  &:focus { border: 1px solid @BLUE; }
  &:active { box-shadow: inset 0 1px 5px rgba(0, 0, 0, .2); }
  &:disabled { opacity: .5; }
}

.f { box-shadow: 1px 1px 1px @shadow-color; }

.num {
  border: 1px solid @shadow-color;
  width: 6em;
}

/* misc */

.cln {
  border: 0;
  border-top: 1px dotted @border-color;
}
